<template>
    <div class="nav_bar_container" v-show="isShowNav">
       <div class="nav_bar_wrapper">
         <div class="nav_bar_left_container" v-customShow="this.$router.routeStack.length>1"
             @click="onClickBack"
             >
             <!-- <slot name="left" v-if="isShowBack"></slot> -->
             <slot name="left" ></slot>
         </div>
         <div class="nav_bar_center_container">
             <slot name="center"></slot>
         </div>
         <div class="nav_bar_right_container">
             <!-- <slot name="right" v-if="isShowScan"></slot> -->
             <slot name="right"></slot>
         </div>
       </div>
    </div>
</template>

<script>
export default {
    computed: {
        isShowNav(){//控制是否显示导航栏
            return this.$route.meta.isShowNav;
        },
        // isShowBack(){//控制是否显示返回图标
        //     return this.$route.meta.isShowBack;
        // },
        // isShowScan(){//控制是否显示扫一扫图标
        //     return this.$route.meta.isShowScan;
        // }   
    },
    methods: {
        onClickBack(){//点击返回上一级
            this.$router.backRoute();
        }
    },
}
</script>
<style lang="scss" scoped>
.nav_bar_container{
    width: 100%;
    height: 3.2rem;
    position: fixed;
    top:0px;
    left:0px;
    background: white;
    border-bottom: 1px solid lightgray;
    .nav_bar_wrapper{
        width: 100%;
        height: 100%;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        .nav_bar_left_container{
            width: 15%;
            height: 100%;
            // background: red;
            visibility:visible;
            display: inline-flex;
            align-items: center;
            justify-content: center;
           
            img{
                width: 1.2rem;
            }
        }
        .nav_bar_center_container{
            width: 70%;
            height: 100%;
            // background: pink;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
        .nav_bar_right_container{
            width: 15%;
            height: 100%;
            // background: yellow;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            img{
                width: 1.2rem;
            }
        }
    }
}

</style>